<script setup lang="ts">
    import { ref, reactive } from "vue";
    import type { FormRules } from "element-plus";
    import ReCol from "@/components/ReCol";
    import { FormProps } from "./types";
    import { usePublicHooks } from "@/views/hooks";

    const props = withDefaults(defineProps<FormProps>(), {
        formInline: () => ({
            higherOptions: [], //状态其他数据,
            dictOptionData: {}, //字典数据
            id:null,

            zonName:null,

            status:null,

            orderCount:null,

            createBy:null,

            createTime:null,

            updateBy:null,

            updateTime:null,

            remark:null,

            delFlag:null,

            revision:null,

            tenantId:null,

        })
    });

    const ruleFormRef = ref();
    const { switchStyle } = usePublicHooks();
    const newFormInline = ref(props.formInline);

    function getRef() {
        return ruleFormRef.value;
    }
    //校验规则
    const formRules = reactive(<FormRules>{
        zonName: [
            { required: true, message: "专区名称为必填项", trigger: "blur" }
        ],
        status: [
            { required: true, message: "状态为必填项", trigger: "blur" }
        ],
        orderCount: [
            { required: true, message: "排序为必填项", trigger: "blur" }
        ],
        remark: [
        ],
    });
        defineExpose({ getRef });
</script>

<template>
    <el-form
            ref="ruleFormRef"
            :model="newFormInline"
            :rules="formRules"
            label-width="82px"
    >
        <el-row :gutter="30">
            <re-col :value="12" :xs="24" :sm="24">




    <el-form-item label="专区名称" prop="zonName">
                <el-input
                    v-model="newFormInline.zonName"
                    clearable
                    placeholder="请输入专区名称"
               />
    </el-form-item>


    <el-form-item label="状态" prop="status">
            <el-select
                    v-model="newFormInline.status"
                    class="!w-[220px]"
                    placeholder="请选择状态"
            >
                <el-option
                        v-for="(item, index) in dictOptionData['sys_common_status']"
                        :key="index"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                />
            </el-select>
    </el-form-item>


    <el-form-item label="排序" prop="orderCount">
                <el-input
                    v-model="newFormInline.orderCount"
                    clearable
                    placeholder="请输入排序"
               />
    </el-form-item>






    <el-form-item label="备注" prop="remark">
            <el-input
                v-model="newFormInline.remark"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                clearable
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
        />
    </el-form-item>




            </re-col>
        </el-row>
    </el-form>
</template>
